<template>

  <div>
<el-table
    :data="getGoods"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="商品编号"
      width="130">
    </el-table-column>
    <el-table-column
      prop="secondcatename"
      label="商品名称"
      width="130">
    </el-table-column>
        <el-table-column
      prop="price"
      label="商品价格"
      width="130">
    </el-table-column>
      <el-table-column
      prop="market_price"
      label="市场价格"
      width="130">
    </el-table-column>

   <el-table-column

      label="图片"
      width="130">
    <template slot-scope="item">
          <div>
            <img v-if="item.row.img" class="imgUrl"  :src="item.row.img" alt="">
          </div>
        </template>

    </el-table-column>
   <el-table-column
        width="65"
      label="是否新品">
 <el-button plain size="mini" type="success">是</el-button>

    </el-table-column>
   <el-table-column
        width="65"
      label="是否热卖">
 <el-button plain size="mini" type="success">是</el-button>

    </el-table-column>
   <el-table-column
        width="65"
      label="状态">
 <el-button plain size="mini" type="danger"  class="qiyong">启用</el-button>

    </el-table-column>
        <el-table-column
      label="操作"

      >
   <template slot-scope="item">
        <div>
  <el-button plain  size="mini" @click='edit(item.row.id)'>编辑</el-button>
 <el-button plain  size="mini" @click="remove(item.row.id)">删除</el-button>

        </div>
      </template>
    </el-table-column>

  </el-table>
     <el-pagination
  background
  layout="prev, pager, next"
  :total="getCount"
  :page-size='getSize'
@current-change='changePage'
  >
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { goodsdelete } from '../../../api/api.js'
export default {
  data () {
    return {

    }
  },

  mounted () {
    this.$store.dispatch('cmmg/getGoodslist')
    this.$store.dispatch('cmmg/getGoodscount')
  },
  methods: {
    // 获取当前页重新调用列表
    changePage (n) {
      this.$store.dispatch('cmmg/changePageAction', n)
    },
    // 删除
    remove (id) {
      this.$confirm('你确定要删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsdelete({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.$store.dispatch('cmmg/getGoodslist')
            this.$store.dispatch('cmmg/getGoodscount')
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // 编辑
    edit (id) {
      this.$emit('edit', id)
    }
  },
  computed: {
    ...mapGetters('cmmg', ['getCount', 'getSize', 'getGoods'])
  }

}
</script>

<style scoped>
.imgUrl{
  width: 100%;
  height: 100%;
}
</style>
